<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="ruleForms"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPwd" class="input">
          <el-input
            type="password"
            v-model="ruleForm.oldPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd" class="input">
          <el-input
            type="password"
            v-model="ruleForm.newPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定新密码" prop="checkPass" class="input">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { editpwd, checkOldPwd } from "@/api/user";
export default {
  data() {
    //判断密码是否复符合
    const checkPassword = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (!/^[a-zA-Z0-9]{6,12}/.test(value)) {
        callback(new Error("数字、英文6-12位"));
      } else {
        //验证时否与确认修改密码一致
        if (this.ruleForm.checkPass) {
          this.$refs.ruleForms.validateField("checkPass");
        }
        callback();
      }
    };
    //判断旧密码
    const checkOldPassword = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入原密码"));
      } else {
        let res = await checkOldPwd({
          oldPwd: value,
        });
        if (res.data.code === 201) {
          callback(new Error("该密码与原密码不一致"));
        }
        callback();
      }
    };
    //二次输入密码是否一致
    const checkPasswordAgain = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入新密码"));
      } else if (!/^[a-zA-Z0-9]{6,12}/.test(value)) {
        callback(new Error("数字、英文6-12位"));
      } else {
        if (value !== this.ruleForm.newPwd) {
          callback(new Error("与新密码不一致"));
        } else {
          callback();
        }
      }
    };

    return {
      ruleForm: {
        oldPwd: "",
        newPwd: "",
        checkPass: "",
      },
      rules: {
        oldPwd: [{ validator: checkOldPassword, trigger: "blur" }],
        newPwd: [{ validator: checkPassword, trigger: "blur" }],
        checkPass: [{ validator: checkPasswordAgain, trigger: "blur" }],
      },
    };
  },
  methods: {
    //确定密码
    confirm() {
      this.$refs.ruleForms.validate(async (valid) => {
        if (valid) {
          let res = await editpwd(this.ruleForm);
          console.log(res);
          let { code } = res.data;
          if (code === 0) {
            localStorage.removeItem("token");
            this.$router.push("/login");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 600px;
  margin-top: 20px;
  margin-left: 20px;
}
.input {
  width: 350px;
}
.el-button--primary {
  background-color: #d99bac;
  border: 0;
}
</style>